<template>
	<view class="a-result">
		<view class="text-xsl padding text-center margin-tb">
			<text :class="iconClass"></text>
		</view>
		<view class="text-xl text-bold text-center">
			{{ props.title }}
		</view>
		<view class="text-lg text-center margin-top">
			<slot name="subTitle"></slot>
		</view>
		<view class="margin-top">
			<slot name="extra"></slot>
		</view>
		<view class="margin-top margin-lr">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	const props = defineProps({
		status: String,
		title: String,
	});
	
	const iconClass = computed(() => {
		switch (props.status) {
			case "success":
				return "cuIcon-roundcheckfill text-green";
			case "warning":
				return "cuIcon-warnfill text-orange";
			case "error":
				return "cuIcon-roundclosefill text-red";
			default:
				return "cuIcon-infofill text-blue";
		}
	});
</script>

<style lang="less">
	p {
		margin-top: 1em;
		margin-bottom: 1em;
	}
</style>